<template>
  <div
    :style="{
        background:styles.img==''?styles.colorBg:'url('+styles.img+')',
        marginTop:styles.marginTop+'px',
       marginBottom:styles.marginBottom+'px',
        marginLeft:styles.marginLR+'px',
         marginRight:styles.marginLR+'px'
        }"
    :class="['product' , styles.type==1?'two':styles.type==2?'three':'']"
    class="minHeight"
  >
    <div
      :style="{
      borderRadius:styles.circle+'px'}"
      v-for="(item,index) in styles.productName"
      :key="index"
      :class="['detail' , styles.type==3?'four':'']"
    >
      <div class="detail-picture">
        <el-image style="width: 100%; height: 100%" :src="item.name.icon" fit="fit"></el-image>
      </div>
      <div class="detail-price" :style="{background:styles.colorProductBg}">
        <div class="detail-price-top">
          <div>
            <p :style="{color:styles.colorTitle}" class="line-one-p">{{item.name.name}}</p>
            <p class="line-one-p">{{item.name.category_name}}</p>
          </div>
        </div>
        <div class="detail-price-bottom">
          <div class="buy">
            <span>
              ￥{{item.name.price}}
<!--              <span class="product-oldprice">￥{{item.name.maxPrice}}</span>-->
            </span>
            <svg
              v-if="styles.typeBtn==1"
              :style="{fontSize:'22px' , color:styles.colorBtn}"
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#iconjiagou" />
            </svg>
            <svg
              v-if="styles.typeBtn==2"
              :style="{fontSize:'18px' , color:styles.colorBtn}"
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#iconjia" />
            </svg>
            <svg
              v-if="styles.typeBtn==3"
              :style="{fontSize:'20px' , color:styles.colorBtn}"
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#iconjia1" />
            </svg>
          </div>
          <!-- <span>￥99</span>
          <span>销量：0</span>-->
        </div>
      </div>
      <div v-if="styles.typePay==1" class="pay" :style="{backgroundImage: 'url('+pay1+')'}">
        <span>{{styles.typeText}}</span>
      </div>
      <div v-if="styles.typePay==2" class="pay" :style="{backgroundImage: 'url('+pay2+')'}">
        <span>{{styles.typeText}}</span>
      </div>
      <div v-if="styles.typePay==3" class="pay" :style="{backgroundImage: 'url('+pay3+')'}">
        <span>{{styles.typeText}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "product",
  created() {
    // console.log(11,this.styles.productName)
  },
  data() {
    return {
      img: require("../../../assets/img/blank.png"),
      pay1: require("../../../assets/img/pay1.png"),
      pay2: require("../../../assets/img/pay2.png"),
      pay3: require("../../../assets/img/pay3.png"),
    };
  },
  props: ["styles"],
};
</script>


<style lang='less' scoped>
@import url("../../../assets/css/base.less");
.two {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  > div {
    width: 49%;
  }
}
.three {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  > div {
    width: 32%;
    margin-right: 2%;
  }
  > div:nth-of-type(3n) {
    margin-right: 0;
  }
}
.four {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  > .detail-picture {
    width: 40%;
  }
  > .detail-price {
    width: 60%;
  }
}
.minHeight{
  min-height: 100px;
}
.product {
  padding: 5px 5px 0;
  .detail {
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    > .pay {
      position: absolute;
      left: 0px;
      top: 0px;
      color: #fff;
      padding: 5px 20px 5px 10px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 90%;
      > span {
        font-size: 12px;
      }
    }
    .detail-picture {
      max-height: 150px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .detail-price {
      padding: 10px;
      position: relative;
      min-height: 100px;
      .detail-price-top {
        > div:nth-of-type(1) {
          >p{
            font-size: 15px;
          }
          > p:nth-of-type(2) {
            font-size: 10px;
            color: #999;
          }
        }
      }
      .detail-price-bottom {
        position: absolute;
        left: 10px;
        bottom: 5px;
        width: 100%;
        padding-right: 20px;
        > .buy {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
}
.product-oldprice {
  color: #999;
  font-size: 12px;
  text-decoration: line-through;
}
</style>
